<template>
  <div>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button v-hasPermi="['cld:regularMeeting:add']" icon="el-icon-plus" plain size="mini" type="primary" @click="handleAdd">新建例会</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="regularMeetingList" border>
      <el-table-column align="center" label="汇报时间" prop="reportTime">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.reportTime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="项目名称" prop="projectName"/>
      <el-table-column align="center" label="例会内容" prop="content"/>
      <el-table-column align="center" label="发布人" prop="createBy"/>
      <el-table-column align="center" label="创建时间" prop="createTime">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" class-name="small-padding fixed-width" label="操作">
        <template slot-scope="scope">
          <el-button v-hasPermi="['cld:regularMeeting:query']" size="mini" type="text" @click="handleView(scope.row)">查看</el-button>
          <el-button v-hasPermi="['cld:regularMeeting:edit']" size="mini" type="text" @click="handleUpdate(scope.row)">修改</el-button>
          <el-button v-hasPermi="['cld:regularMeeting:remove']" size="mini" type="text" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total>0" :limit.sync="queryParams.pageSize" :page.sync="queryParams.pageNum" :total="total" @pagination="getList"/>

    <!-- 添加或修改例会管理对话框 -->
    <el-dialog :title="title" :visible.sync="open" append-to-body width="40%">
      <el-form ref="form" :model="form" :rules="rules" label-width="80px"  size="mini">
        <el-row>
          <el-col :span="12">
            <el-form-item label="汇报时间" prop="reportTime" >
              <el-date-picker v-model="form.reportTime" clearable placeholder="请选择汇报时间" type="date" value-format="yyyy-MM-dd"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="客户查看" prop="customerView">
              <el-radio-group v-model="form.customerView">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="0">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-form-item label="例会内容" prop="content">
            <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入内容" v-model="form.content" />
          </el-form-item>
        </el-row>
        <div v-if="!form.regularMeetingId">
        <el-row>
          <el-col :span="12">
              <el-form-item label="发放项目">
                <el-radio-group v-model="form.projectType">
                  <el-radio :label="1">所有项目</el-radio>
                  <el-radio :label="2">选择项目</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
        </el-row>
        <el-row v-if="form.projectType == 2" :gutter="10" class="mb8">
            <el-col :span="1.5">
              <el-button icon="el-icon-plus" plain size="mini" type="primary" @click="handleAddProject">添加项目
              </el-button>
            </el-col>
          </el-row>
          <el-row v-if="form.projectType == 2">
            <el-table :data="form.projectList" border>
              <el-table-column align="center" label="项目区域" prop="projectRegion">
                <template slot-scope="scope">
                  <dict-tag :options="dict.type.cld_project_region" :value="scope.row.projectRegion"/>
                </template>
              </el-table-column>
              <el-table-column align="center" label="项目名称" prop="projectName"/>
              <el-table-column align="center" class-name="small-padding fixed-width" label="操作">
                <template slot-scope="scope">
                  <el-button size="mini" type="text" @click="handleDeleteProject(scope.row)">移除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-row>
        </div>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>


    <!-- 查看详情 -->
    <el-dialog title="公司例会" :visible.sync="viewOpen" append-to-body width="40%">
      <el-descriptions  direction="vertical" :column="3" border>
        <el-descriptions-item label="汇报时间">{{ parseTime(form.reportTime, '{y}-{m}-{d}') }}</el-descriptions-item>
        <el-descriptions-item label="项目名称">{{ form.projectName }}</el-descriptions-item>
        <el-descriptions-item label="客户查看" >{{ form.customerView == 1 ? '是' : '否' }}</el-descriptions-item>
        <el-descriptions-item label="例会内容" :span="3">{{ form.content }}</el-descriptions-item>
        <el-descriptions-item label="附件"> <image-preview :height="200" :src="form.picture" :width="200"/></el-descriptions-item>
      </el-descriptions>
    </el-dialog>

     <!-- 选择项目 -->
     <el-dialog :close-on-click-modal="false" :destroy-on-close="true" :visible.sync="isProjectOpen" append-to-body title="选择项目" width="40%">
      <selected-project :notProjectIds="notProjectIds" @multipleInput="handleMultipleProject"></selected-project>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitSelectedProject">确 定</el-button>
        <el-button @click="cancelOpenProject">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  addRegularMeeting,
  delRegularMeeting,
  getRegularMeeting,
  listRegularMeeting,
  updateRegularMeeting
} from "@/api/cld/regularMeeting";
import selectedProject from "../project/selectedProject.vue";
export default {
  name: "RegularMeeting",
  components: {selectedProject},
  dicts: ['cld_project_region', 'cld_project_post', 'cld_project_duits'],
  data() {
    return {
      // 遮罩层
      loading: true,
      // 总条数
      total: 0,
      // 例会管理表格数据
      regularMeetingList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        customerView: [
          {required: true, message: "请选择是否客户查看", trigger: "change"}
        ],
        reportTime: [
          {required: true, message: "汇报时间不能为空", trigger: "blur"}
        ],
        content: [
          {required: true, message: "例会内容不能为空", trigger: "blur"}
        ],
      },
       // 选择项目弹框
       isProjectOpen: false,
      // 已选择项目
      notProjectIds: [],
      // 临时存放选择项目
      temporaryList: [],
      viewOpen: false
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /** 查询例会管理列表 */
    getList() {
      this.loading = true;
      listRegularMeeting(this.queryParams).then(response => {
        this.regularMeetingList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        regularMeetingId: null,
        reportTime: null,
        customerView: 1,
        content: null,
        projectType: 1,
        projectList: []
      };
      this.resetForm("form");
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加例会管理";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const regularMeetingId = row.regularMeetingId || this.ids
      getRegularMeeting(regularMeetingId).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改例会管理";
      });
    },
     /** 详情按钮操作 */
     handleView(row) {
      this.reset();
      const regularMeetingId = row.regularMeetingId || this.ids
      getRegularMeeting(regularMeetingId).then(response => {
        this.form = response.data;
        this.viewOpen = true;
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.regularMeetingId != null) {
            updateRegularMeeting(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addRegularMeeting(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const regularMeetingIds = row.regularMeetingId || this.ids;
      this.$modal.confirm('是否确认删除例会管理编号为"' + regularMeetingIds + '"的数据项？').then(function () {
        return delRegularMeeting(regularMeetingIds);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {
      });
    },
     // 选择项目
     handleAddProject() {
      this.isProjectOpen = true;
    },
    // 勾选项目回调
    handleMultipleProject(selection) {
      this.temporaryList = selection;
    },
    // 确认选择项目
    submitSelectedProject() {
      this.temporaryList.forEach(item => {
        this.form.projectList.push(item);
      })
      this.isProjectOpen = false;
      this.temporaryList = [];
    },
    // 取消选择项目
    cancelOpenProject() {
      this.isProjectOpen = false;
      this.temporaryList = [];
    },
    // 移除项目
    handleDeleteProject(row) {
      const index = this.form.projectList.indexOf(row);
      if (index > -1) {
        this.form.projectList.splice(index, 1);
      }
    }
  }
};
</script>
